<template>
	<view class="">
		<view class="box">
			<!-- 头部 -->
			<publicHeader></publicHeader>

			<view class="page_main">
				<view class="pt32 pb32 pl30 pr30">
					<view class="swiper_box">
						<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="3000">
							<swiper-item v-for="item,index in bannerList" :key="index">
								<view class="swiper-item">
									<a :href="item.linkUrl">
										<image :src="item.banner" class="swiper_img"></image>
									</a>

								</view>
							</swiper-item>
						</swiper>
					</view>
					<view class="mt45 fs32 lh40 fwb cor_000 tac">CHINA BEAUTY EXPO EXHIBITOR LIST</view>
					<publicNav :navindex="1"></publicNav>
				</view>

				<view class="re">
					<view class="content_box">
						<view class="re mb24">
							<input type="text" class="w_ipt_01" placeholder="PLEASE SEARCH FOR KEYWORDS"
								placeholder-style="color: #333" />
							<image src="../../static/ic_search.png" class="ic_search_pos"></image>
						</view>

						<view class="re mb24">
							<zxz-uni-data-select @change="exhibitorTypeChange" placeholder="BY SECTORS"
								v-model="listForm.type" dataKey="label" dataValue="value"
								:localdata="typeList"></zxz-uni-data-select>
						</view>

						<view class="re mb24">
							<zxz-uni-data-select @change="categoryChange" v-model="listForm.category"
								placeholder="BY CATEGORYS" multiple dataKey="label" dataValue="value"
								:localdata="CatList"></zxz-uni-data-select>
						</view>

						<view class="re mb24">
							<zxz-uni-data-select @change="regionsChange" v-model="listForm.country"
								placeholder="BY COUNTRYS/REGIONS" multiple dataKey="label" dataValue="value"
								:localdata="areaList"></zxz-uni-data-select>
						</view>

						<view class="re mb24">
							<zxz-uni-data-select @change="boothChange" v-model="listForm.boothNumber"
								placeholder="BY HALL" multiple dataKey="label" dataValue="value"
								:localdata="BoothNumberList"></zxz-uni-data-select>
						</view>

						<view class="re mb24 flex_box jcsb">

							<view class="on tags_1" @click="listForm.currentPage = 1,getLists()">SEARCH</view>
							<view class="tags_1" @click="reset()">RESET</view>
						</view>

						<view class="card_list_2">
							<view class="item_card_box" v-for="(item, index) in zhanshangList" :key="index">
								<view class="flex_box">
									<view class="re mr25">
										<view class="card_img">
											<image
												:src="item.picture + '?x-oss-process=image/auto-orient,1/resize,m_lfit,w_350/quality,q_90'"
												class="img_size" mode="aspectFit"></image>
										</view>
										<view class="card_btn_1" v-if="item.isCollect != '1'"
											@click.stop="addCpLike(item)">+ ADD TO MY LISTS</view>
										<view class="card_btn_3" v-if="item.isCollect == '1'"
											@click.stop="addCpLike(item)">ADDED</view>
									</view>
									<view class="item ov">
										<view class="fs28 lh36 fwb cor_000" style="min-height: 72rpx;">{{item.zhName}}
										</view>
										<view class="pt15 pb15 fs24 lh32 bb5">
											<view class="re">
												<text class="fwb">SECTORS : </text>
												<text class="" v-if="item.type== 1">COSMETICS</text>
												<text class="" v-if="item.type== 3">PROFESSIONAL BEAUT</text>
												<text class="" v-if="item.type== 2">SUPPLY CHAIN</text>
												<text class="" v-if="item.type== 4">SERVICES</text>
											</view>
										</view>

										<view class="pt15 pb15 fs24 lh32 bb5" v-if="item.brandEnName">
											<view class="re">
												<text class="fwb">brandName : </text>
												<text class="">{{item.brandEnName}}</text>
											</view>
										</view>

										<view class="pt15 pb15 fs24 lh32 bb5" v-if="item.companyEnName">
											<view class="re">
												<text class="fwb">FACTORY: </text>
												<text class="">{{item.companyEnName}}</text>
											</view>
										</view>

										<view class="pt15 pb15 fs24 lh32 bb5" v-if="item.areaEnName">
											<view class="re">
												<text class="fwb">COUNTRY/REGION : </text>
												<text class="">{{item.areaEnName}}</text>
											</view>
										</view>

										<view class="pt15 pb15 fs24 lh32" v-if="item.categoryEnglishName">
											<view class="re">
												<text class="fwb">CATEGORYS : </text>
												<text class=""> {{item.categoryEnglishName}}</text>
											</view>
										</view>

									</view>
								</view>
							</view>

							<view v-if="zhanshangList.length === 0">
								<u-empty text="NO DATA" mode="list" icon="http://cdn.uviewui.com/uview/empty/data.png">
								</u-empty>
							</view>
						</view>
					</view>
					<image src="../../static/ic_bg_1.png" class="page_bg_pos_1"></image>
				</view>

			</view>

			<!-- footer -->
			<publicFooter></publicFooter>


		</view>
	</view>
</template>

<script>
	import zxzUniDataSelect from '@/uni_modules/zxz-uni-data-select/components/zxz-uni-data-select/zxz-uni-data-select.vue'
	import likeMixin from '@/cache/likeMixin';
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		getSceneRosterListApi,
		aliTranslateApi,
		getExhibitionBannerListApi,
		getbaseInfoListApi,
		getPageAllProductsApi,
		getBoothNumberListApi,
		getActivityListApi,
		getAreaListApi,
		getAllCategoryListApi,
		getEnExhibitorAdvertApi
	} from '../../http/api.js'

	import {
		getParam
	} from '@/utils/util.js'


	export default {
		mixins: [likeMixin],
		components: {
			popupCheckbox: () => import("@/components/jiangcheng-popupCheckbox/popupCheckbox.vue"),
		},
		data() {
			return {
				bannerList: [],
				activityList: [],
				loading: true,
				// 参数
				listForm: {
					pageSize: 12, //分页大小
					currentPage: 1, //fenye
					sceneId: 1, //批次
					fullName: '', //搜索词,
					country: '', //国家和地区
					category: '', //品类
					boothNumber: '', //展位号
					activityId: '', //活动ID
				},
				//列表
				zhanshangList: [],
				companyAreaList: [],
				brandAreaList: [],
				serverAreaList: [],
				priceRange: '',
				minPrice: 0,
				maxPrice: 0,
				priceRangeList: [{
					min: 0,
					max: 100,
					name: '0 - 100'
				}, {
					min: 100,
					max: 300,
					name: '100 - 300'
				}, {
					min: 300,
					max: 1000,
					name: '300 - 1000'
				}, {
					min: 1000,
					max: 999999999,
					name: '1000+'
				}],
				swiperDom: '',
				CatList: [],
				AllCatList: [],
				options: [],
				list: [],
				area: {
					list: [],
					loading: false,
				},
				BoothNumberList: [],
				areaList: [],
				areaLoading: false,
				typeList: [{
					label: 'COSMETICS',
					value: 2
				}, {
					label: 'PROFESSIONAL BEAUTY',
					value: 6
				}, {
					label: 'SUPPLY CHAIN',
					value: 4
				}, {
					label: 'SERVICES',
					value: 8
				}]




			}
		},
		onLoad() {
			this.getAllCategoryList();
			this.advertGetList();
			this.getCatList();
			this.getActivityList();
		},

		onReachBottom() {
			this.listForm.currentPage = this.listForm.currentPage + 1;
			this.getLists();
		},

		methods: {
			reset() {
				this.listForm.activityId = '';
				this.listForm.boothNumber = '';
				this.listForm.category = '';
				this.listForm.country = '';
				this.listForm.currentPage = 1;
				this.listForm.fullName = '';
				this.listForm.sceneId = 1;
				this.listForm.type = '';
				this.zhanshangList = [];
				this.getLists();
			},

			searchListCz() {
				this.listForm = {
					pageSize: 12, //分页大小
					currentPage: 1, //fenye
					sceneId: 1, //批次
					fullName: '', //搜索词,
					country: '', //国家和地区
					category: '', //品类
					boothNumber: '', //展位号
					activityId: '', //活动ID
				}
				this.getLists();
			},
			unescapeString(str) {
				return str
					.replace(/\\\\/g, '\\') // 双反斜杠
					.replace(/\\"/g, '"') // 双引号
					.replace(/\\n/g, '\n') // 换行符
					.replace(/\\r/g, '\r') // 回车符
					.replace(/\\t/g, '\t'); // 制表符
				// 可以继续添加其他需要的转义序列替换规则
			},
			getActivityList() {
				getActivityListApi({
					type: 2
				}).then(res => {
					let activityNameList = [];
					let addressList = [];
					res.data.forEach(function(item) {
						activityNameList.push(item.title)
						addressList.push(item.address ? item.address : '')
					})
					console.log(addressList, 'addressList')
					let activityEnNameStr = '';
					let activityEnNameList = [];
					let addressEnNameList = [];
					if (activityEnNameList) {

					}
					aliTranslateApi({
						formatType: 'text',
						sourcelanguage: 'zh',
						sourceText: activityNameList.join(','),
						targetLanguage: 'en'
					}).then(transRes => {
						activityEnNameList = transRes.data?.split(',')
						activityEnNameList?.forEach(function(item, index) {
							res.data[index].enTitle = item;
						})
						this.activityList = res.data;
						this.loading = false;
					});

					aliTranslateApi({
						formatType: 'text',
						sourcelanguage: 'zh',
						sourceText: addressList.join('$'),
						targetLanguage: 'en'
					}).then(transRes => {

						activityEnNameList = transRes.data.split(',')
						activityEnNameList.forEach(function(item, index) {
							res.data[index].enTitle = item;
						})


						this.activityList = res.data;
					});

				})
			},
			toProductDetail(item) {
				if (this.$i18n.locale == 'en') {
					return true;
				}
				// //1.日化商品  2.专业商品  3.工厂产品  4.服务
				let id = item.id;
				let url = '';
				if (item.type == '2') {
					url = '/products/details?type=3&id=' + id
				} else if (item.type == '4') {
					url = '/products/details?type=3&id=' + id
				} else if (item.type == '6') {
					url = `/products/gcdetail?t=${this.itemS.type}&type=4&id=${id}`
					// url = '/products/gcdetail?type=4&id=' + id
				} else if (item.type == '8') {
					url = `/products/fwsdetail?t=${this.itemS.type}&type=5&id=${id}`
				}
				// this.$router.push(url);
			},
			exhibitorTypeChange(e) {
				this.listForm.currentPage = 1;
				this.listForm.activityId = '';
				this.listForm.boothNumber = '';
				this.listForm.category = '';
				this.listForm.category = '';
				this.getLists();
				this.getAreaList(e.value);
				this.getAllCategoryList(e.value)
			},

			categoryChange() {
				let that = this;
				this.listForm.currentPage = 1;
				this.getLists();
			},

			regionsChange() {
				let that = this;
				this.listForm.currentPage = 1;
				this.getLists();
			},

			boothChange() {
				let that = this;
				this.listForm.currentPage = 1;
				this.getLists();
			},

			activityChange() {
				let that = this;
				this.listForm.currentPage = 1;
				this.getLists();
			},

			searchList() {
				this.listForm.currentPage = 1;
				this.getLists();
			},
			getAreaList(type) {
				this.area.loading = true;
				getAreaListApi({
					type: type
				}).then(res => {
					// this.area.list = res.data;
					// this.area.loading = false;
					let areaList = [];
					res.data.forEach(v => {
						let p = {
							value: v.id,
							label: v.enName?.toUpperCase(),

						}
						areaList.push(p);
						v.childList.forEach(vv => {
							let pp = {
								value: vv.id,
								label: '┗━' + vv.enName?.toUpperCase(),
							}
							areaList.push(pp);
							// p.children.push(pp);
						})

					})
					this.areaList = areaList;
					this.areaLoading = false;
				})
			},

			priceRangeChange(e) {
				let that = this;
				that.priceRangeList.forEach(function(item) {
					if (item.name === e) {
						that.minPrice = item.min;
						that.maxPrice = item.max;
						that.getLists();
					}
				})

			},

			getBoothNumberList(sceneId) {
				getBoothNumberListApi({
					sceneId: sceneId
				}).then(res => {
					this.options = res.data;
					let BoothNumberList = [];
					res.data.forEach(function(item) {
						if (item != '云展商' && item != '室外VIP' && item != ' 云展商' && item != '临时') {
							BoothNumberList.push({
								label: item,
								value: item
							})
						}
					})
					this.BoothNumberList = BoothNumberList;
				})
			},

			getAllCategoryList(e) {
				// alert(1);
				getAllCategoryListApi({
					type: e
				}).then(res => {
					let catList = [];
					res.data.forEach(v => {
						let p = {
							value: v.id,
							label: v.englishName?.toUpperCase(),

						}
						catList.push(p);
						v.childList.forEach(vv => {
							let pp = {
								value: vv.id,
								label: '  ' + vv.englishName?.toUpperCase(),
							}
							catList.push(pp);

						})

					})
					this.CatList = catList;
				})

			},

			changePageCountHandle(size) {
				this.listForm.currentPage = 1;
				this.listForm.pageSize = size;
				this.getLists();
			},
			handleCurrentChange(page) {
				this.listForm.currentPage = page;
				this.getLists();
			},

			advertGetList() {
				getEnExhibitorAdvertApi({}).then(res => {
					this.bannerList = res.data;
				});
			},

			getCatList() {

				let that = this;
				getbaseInfoListApi().then(res => {
					that.listForm.sceneId = res.data[1]?.id || 1;
					that.getLists();
					// that.listForm.sceneId
					that.getBoothNumberList(1);
				}).finally(() => {

				});
			},
			getLists() {
				this.loading = true;
				let f = JSON.parse(JSON.stringify(this.listForm));
				if (f.country) {
					f.country = f.country.join(',');
				}
				if (f.category) {
					f.category = f.category.join(',');
				}
				if (f.boothNumber) {
					f.boothNumber = f.boothNumber.join(',');
				}
				getPageAllProductsApi(f).then(res => {
					// console.log(res,"res")
					let names = [];
					res.data.records.forEach(item => {
						let p = item.picture.split(",");
						item.picture = p[0] || '';
						names.push(item.zhName);
						item.isCollect = this.isCpLike(item.id) ? 1 : 2;

						item.companyEnName = this.unescapeString(item
							.companyEnName); // JSON.stringify(item.companyEnName).replace(/^"|"$/g, '')
						item.brandEnName = item.brandEnName?.toUpperCase();

						item.zhName = item.zhName.toUpperCase();
						item.areaEnName = item.areaEnName?.toUpperCase()?.replace(/等/g, '');
						item.categoryEnglishName = item.categoryEnglishName?.toUpperCase();

					})

					this.$aliTranslatezHtoen(names.join(',')).then(rres => {
						let enNames = rres.data?.split(',');
						res.data?.records.forEach((i, k) => {
							i.zhName = enNames[k];
						})
						let zhanshangList = [];
						if (this.listForm.currentPage > 1) {
							zhanshangList = this.zhanshangList
						}

						res.data.records.forEach(item => {
							zhanshangList.push(item)
						})
						this.zhanshangList = zhanshangList;
						this.loading = false;
					})

				}).finally(() => {
					this.loading = false;
				})
			},

			getSwiper() {
				this.swiperDom = new Swiper('#swiper_1', {
					loop: true,
					speed: 500, //控制滑动的速度
					autoplay: {
						delay: 300000, //切换的时间
						disableOnInteraction: false //因为默认是true,所以会造成手动滑动后就不能自动播放了
					},
					// 如果需要分页器
					pagination: {
						el: '#swiper_1 .swiper-pagination',
						clickable: true,
					},
					// slidesPerView: 4,
					// slidesPerGroup: 1,
					// spaceBetween: 44,
					// 如果需要前进后退按钮
					navigation: {
						nextEl: '#swiper_1 .swiper-button-next',
						prevEl: '#swiper_1 .swiper-button-prev',
					},
				})
			},

			toDetail(item) {
				if (item.type === '1') {
					//这是展商/集团页面
					uni.navigateTo({
						url: '/pages/Group_page/Group_page?id=' + item.companyId + '&type=' + item.type
					})
				} else if (item.type === '5') {
					//这是工厂页面
					uni.navigateTo({
						url: '/pages/brand/factorydetail?id=' + item.companyId + '&type=' + item.type
					})
				} else if (item.type === '3') {
					//这是服务商页面
					uni.navigateTo({
						url: '/pages/brand/providerdetail?id=' + item.companyId + '&type=' + item.type
					})
				}
			},

		}
	}
</script>

<style>
	.swiper_box {
		position: relative;
		width: 100%;
		height: 184rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.swiper_box .swiper_img {
		position: relative;
		width: 100%;
		height: 184rpx;
	}

	.tags_1 {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 210rpx;
		height: 76rpx;
		font-size: 28rpx;
		line-height: 36rpx;
		font-weight: bold;
		border-radius: 8rpx;
		border: 2rpx solid #CCCCCC;
	}

	.on.tags_1 {
		color: #fff;
		background: #A90000;
		border-color: #A90000;
	}

	.page_bg_pos_1 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 600rpx;
		z-index: 1;
	}

	.content_box {
		position: relative;
		padding: 32rpx 30rpx;
		z-index: 2;
	}

	.w_ipt_01 {
		position: relative;
		display: inline-block;
		padding: 0 24rpx 0 72rpx;
		width: 100%;
		height: 80rpx;
		line-height: 78rpx;
		font-size: 24rpx;
		color: #000;
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 2rpx solid #EEEEEE;
		vertical-align: middle;
	}

	.w_select_01 {
		position: relative;
		display: inline-block;
		padding: 0 72rpx 0 24rpx;
		width: 100%;
		height: 80rpx;
		line-height: 78rpx;
		font-size: 24rpx;
		color: #000;
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 2rpx solid #EEEEEE;
		vertical-align: middle;
	}

	.w_select_02 {
		position: relative;
		display: inline-block;
		padding: 0 50rpx 0 16rpx;
		width: 100%;
		height: 56rpx;
		line-height: 56rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #000;
		background: #F7F7F7;
		border-radius: 8rpx;
		border: 0;
		vertical-align: middle;
	}

	.ic_search_pos {
		position: absolute;
		top: 50%;
		left: 24rpx;
		width: 32rpx;
		height: 32rpx;
		z-index: 2;
		transform: translateY(-50%);
	}

	.ic_ipt_arw,
	.ic_ipt_arw_2 {
		position: absolute;
		top: 50%;
		right: 24rpx;
		width: 24rpx;
		height: 24rpx;
		z-index: 2;
		transform: translateY(-50%);
	}

	.ic_ipt_arw_2 {
		width: 32rpx;
		height: 32rpx;
	}

	.view_opa_pos {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
	}

	.laber_box {
		position: relative;
		padding: 0 16rpx;
		height: 56rpx;
		line-height: 56rpx;
		font-size: 24rpx;
		color: #666;
	}

	.card_list_2 {
		position: relative;
	}

	.card_list_2 .item_card_box {
		padding: 30rpx 0;
		border-bottom: 1px solid #eee;
	}

	.card_list_2 .item_card_box .card_img {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 252rpx;
		height: 252rpx;
		border: 2px solid #eee;
		border-radius: 8rpx;
		background: #fff;
	}

	.card_list_2 .item_card_box .card_img .img_size {
		position: relative;
		width: 252rpx;
		height: 190rpx;
	}

	.card_btn_1 {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 64rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #A90000;
		background: #fff;
		border: 2rpx solid #A90000;
		border-radius: 8rpx;
		margin-top: 24rpx;
	}

	.card_btn_2 {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 64rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #000;
		background: #F7F7F7;
		border: 2rpx solid transparent;
		border-radius: 8rpx;
		margin-top: 24rpx;
	}

	.card_btn_3 {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 64rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #fff;
		background: #A90000;
		border: 2rpx solid #A90000;
		border-radius: 8rpx;
		margin-top: 24rpx;
	}
</style>